{extend name="main"}
{block name="style"}
<style type="text/css">
    .w-80px {
        width: 80px;
    }

    .el-collapse {
        border: 0;
    }

    .el-collapse-item__header {
        border: 0;
    }

    .el-collapse-item__wrap {
        border: 0;
    }

    .border-lg {
        border-width: 2px !important;
    }

    .setting-item .setting-item-del {
        display: none;
    }

    .setting-item:hover .setting-item-del {
        display: block;
    }

    #user_agreement,
    #privacy {
        line-height: 1;
        width: 800px;
    }

    .cid-title {
        font-size: .8rem;
        font-weight: bold;
    }
</style>
{/block}
{block name="body"}




<div class="bg-white px-3 pb-3">
    <div class="mb-3">
        <el-tabs v-model="activeName">
            <el-tab-pane label="数据大屏" name="xy_data_screen"></el-tab-pane>
            <el-tab-pane label="基数设置" name="base_num"></el-tab-pane>
        </el-tabs>
    </div>
    <el-form label-width="200px" :label-position="labelPosition" @submit.native.prevent="return;" v-loading="loading"  v-if="activeName!=='base_num'">
        <div v-for="(item,i) in list">
            <!-- <el-form-item v-for="(v,index) in item" :label="v.title" class="setting-item"
                v-show="formItemShow.indexOf(v.ctype+'.'+v.key)>-1">
                <div class="setting-item-body flex flex-center">
                    <div v-if="v.type==='input'" class="px-3 flex-1">
                        <el-input class="col-4 px-0" :class="getInputCol(v.value)" v-model="v.value"
                            @change="editConfig(v)"></el-input>
                        <div class="text-muted small" v-if="v.tips">
                            <el-popover placement="top-start" width="300" trigger="click" :content="v.ctype+'.'+v.key">
                                <div slot="reference" v-html="warningIcon+v.tips"></div>
                            </el-popover>
                        </div>
                    </div>
                </div>
            </el-form-item> -->
        </div>

        <div>
            <el-form-item label="预览地址：">
                <div class="setting-item-body flex flex-center">
                    <div class="px-3 flex-1">
                        <span style="padding-right: 2em;">{$url}</span>
                        <a href="javascript:;" @click="generateToken()">
                            重置token
                        </a>
                        <a style="margin-left: 1em;" href="javascript:;" id="copyUrl" @click="copyUrl">
                            复制链接
                        </a>
                    </div>
                </div>
            </el-form-item>
        </div>
        <el-form-item class="setting-item">
            <div class="setting-item-body px-3">
                <el-button type="primary" :loading="loading" @click="preview">预览</el-button>
            </div>
        </el-form-item>
    </el-form>
    <el-form label-width="200px" :label-position="labelPosition" @submit.native.prevent="submitConfig" v-loading="loading" v-show="activeName==='base_num'">
        <div v-for="(item,i) in list">
            <el-form-item v-for="(v,index) in item" :label="v.title" class="setting-item" v-show="formItemShow.indexOf(v.ctype+'.'+v.key)>-1">
                <div class="setting-item-body flex flex-center">
                    <div v-if="v.type==='input'" class="px-3 flex-1">
                        <el-input class="col-4 px-0" :class="getInputCol(v.value)"
                                  v-model="v.value"
                                  @change="editConfig(v)"></el-input>
                        <div class="text-muted small" v-if="v.tips">
                            <el-popover
                                    placement="top-start"
                                    width="300"
                                    trigger="click"
                                    :content="v.ctype+'.'+v.key">
                                <div slot="reference" v-html="warningIcon+v.tips"></div>
                            </el-popover>
                        </div>
                    </div>
                    <div v-if="v.type === 'textarea'" class="px-3 flex-1">
                        <el-input type="textarea" :autosize="{ minRows: 3}" class="col-4 px-0"
                                  v-model="v.value"
                                  @change="editConfig(v);"></el-input>
                        <div class="text-muted small" v-if="v.tips">
                            <el-popover
                                    placement="top-start"
                                    width="300"
                                    trigger="click"
                                    :content="v.ctype+'.'+v.key">
                                <div slot="reference" v-html="warningIcon+v.tips"></div>
                            </el-popover>
                        </div>
                    </div>
                    <div v-if="v.type === 'upload'" class="px-3 flex-1">
                        <el-image
                                v-if="v.url"
                                class="mw-200px mh-200px"
                                :src="v.url"
                                :preview-src-list="[v.url]">
                        </el-image>
                        <div class="row mx-0 flex-center">
                            <el-upload
                                    class="avatar-uploader"
                                    action="/uploadFiles"
                                    name="file"
                                    accept="image/*"
                                    :data="{path:'web/img',ctype:i,index:index,id:v.id}"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :on-error="handleAvatarError"
                                    :before-upload="beforeAvatarUpload">
                                <el-button size="small" type="primary">选择文件</el-button>
                            </el-upload>
                            <div class="text-muted small px-3" v-if="v.tips">
                                <el-popover
                                        placement="top-start"
                                        width="300"
                                        trigger="click"
                                        :content="v.ctype+'.'+v.key">
                                    <div slot="reference" v-html="warningIcon+v.tips"></div>
                                </el-popover>
                            </div>
                        </div>
                    </div>
                    <div v-if="v.type === 'upload_file'" class="px-3 flex-1">
                        <el-input class="col-4 px-0" :class="getInputCol(v.value)"
                                  v-model="v.value"
                                  @keyup.enter.native="editConfig(v)"></el-input>
                        <div class="row mx-0 flex-center">
                            <el-upload
                                    class="avatar-uploader"
                                    action="/uploadFiles"
                                    name="file"
                                    :data="{path:'publics/files',ctype:i,index:index,id:v.id}"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :on-error="handleAvatarError">
                                <el-button size="small" type="primary">选择文件</el-button>
                            </el-upload>
                            <div class="text-muted small px-3" v-if="v.tips">
                                <el-popover
                                        placement="top-start"
                                        width="300"
                                        trigger="click"
                                        :content="v.ctype+'.'+v.key">
                                    <div slot="reference" v-html="warningIcon+v.tips"></div>
                                </el-popover>
                            </div>
                        </div>
                    </div>
                    <div v-if="v.type === 'switch'" class="row mx-0 px-3 flex-center flex-1">
                        <el-switch
                                v-model="v.value"
                                active-color="#13ce66"
                                inactive-color="#6c757d"
                                :active-value="1"
                                :inactive-value="0"
                                @change="editConfig(v);">
                        </el-switch>
                        <div class="text-muted small px-3" v-if="v.tips">
                            <el-popover
                                    placement="top-start"
                                    width="300"
                                    trigger="click"
                                    :content="v.ctype+'.'+v.key">
                                <div slot="reference" v-html="warningIcon+v.tips"></div>
                            </el-popover>
                        </div>
                    </div>
                    <div v-if="v.type === 'radio'" class="px-3 flex-1">
                        <el-radio-group
                                v-model="v.value"
                                @change="editConfig(v);">
                            <el-radio v-for="va in v.options" :label="va.value">{{va.title}}</el-radio>
                        </el-radio-group>
                        <div class="text-muted small" v-if="v.tips">
                            <el-popover
                                    placement="top-start"
                                    width="300"
                                    trigger="click"
                                    :content="v.ctype+'.'+v.key">
                                <div slot="reference" v-html="warningIcon+v.tips"></div>
                            </el-popover>
                        </div>
                    </div>
                    <div v-if="v.type === 'checkbox'" class="px-3 flex-1">
                        <el-checkbox-group
                                v-model="v.value"
                                @change="editConfig(v);">
                            <el-checkbox v-for="va in v.options" :label="va.value">{{va.title}}</el-checkbox>
                        </el-checkbox-group>
                        <div class="text-muted small" v-if="v.tips">
                            <el-popover
                                    placement="top-start"
                                    width="300"
                                    trigger="click"
                                    :content="v.ctype+'.'+v.key">
                                <div slot="reference" v-html="warningIcon+v.tips"></div>
                            </el-popover>
                        </div>
                    </div>
                    <div v-if="v.type === 'select'" class="row mx-0 px-3 flex-center flex-1">
                        <el-select
                                v-model="v.value"
                                @change="editConfig(v);">
                            <el-option
                                    v-for="item in v.options"
                                    :key="item.value"
                                    :label="item.title"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <div class="text-muted small px-3" v-if="v.tips">
                            <el-popover
                                    placement="top-start"
                                    width="300"
                                    trigger="click"
                                    :content="v.ctype+'.'+v.key">
                                <div slot="reference" v-html="warningIcon+v.tips"></div>
                            </el-popover>
                        </div>
                    </div>
                    <div v-if="v.type === 'color'" class="row mx-0 px-3 flex-center flex-1">
                        <el-color-picker
                                v-model="v.value" show-alpha
                                @change="editConfig(v);">
                        </el-color-picker>
                        <div class="text-muted small px-3" v-if="v.tips">
                            <el-popover
                                    placement="top-start"
                                    width="300"
                                    trigger="click"
                                    :content="v.ctype+'.'+v.key">
                                <div slot="reference" v-html="warningIcon+v.tips"></div>
                            </el-popover>
                        </div>
                    </div>
                    <div v-if="v.type === 'date'" class="row mx-0 px-3 flex-center flex-1">
                        <el-date-picker
                                v-model="v.value"
                                type="date"
                                placeholder="选择日期"
                                @change="editConfig(v);">
                        </el-date-picker>
                        <div class="text-muted small px-3" v-if="v.tips">
                            <el-popover
                                    placement="top-start"
                                    width="300"
                                    trigger="click"
                                    :content="v.ctype+'.'+v.key">
                                <div slot="reference" v-html="warningIcon+v.tips"></div>
                            </el-popover>
                        </div>
                    </div>
                    <div v-if="v.type === 'time'" class="row mx-0 px-3 flex-center flex-1">
                        <el-time-picker
                                v-model="v.value"
                                arrow-control
                                :picker-options="{
					selectableRange: '00:00:00 - 23:59:59'
					}"
                                value-format="H:m:s"
                                placeholder="选择时间"
                                @change="editConfig(v);">
                        </el-time-picker>
                        <div class="text-muted small px-3" v-if="v.tips">
                            <el-popover
                                    placement="top-start"
                                    width="300"
                                    trigger="click"
                                    :content="v.ctype+'.'+v.key">
                                <div slot="reference" v-html="warningIcon+v.tips"></div>
                            </el-popover>
                        </div>
                    </div>
                    <div v-if="v.type === 'datetime'" class="row mx-0 px-3 flex-center flex-1">
                        <el-date-picker
                                v-model="v.value"
                                type="datetime"
                                placeholder="选择日期时间"
                                @change="editConfig(v);">
                        </el-date-picker>
                        <div class="text-muted small px-3" v-if="v.tips">
                            <el-popover
                                    placement="top-start"
                                    width="300"
                                    trigger="click"
                                    :content="v.ctype+'.'+v.key">
                                <div slot="reference" v-html="warningIcon+v.tips"></div>
                            </el-popover>
                        </div>
                    </div>
                    <div v-if="v.type === 'array'" class="mx-0 px-3 flex-1">
                        <el-tag
                                :key="tag"
                                v-for="tag in v.value"
                                closable
                                effect="plain"
                                class="mr-1"
                                :disable-transitions="false"
                                @close="handleClose(v,tag)">
                            {{tag}}
                        </el-tag>
                        <el-input
                                class="w-80px"
                                v-if="inputVisible"
                                v-model="inputValue"
                                ref="saveTagInput"
                                size="small"
                                @keyup.enter.native="handleInputConfirm(v)"
                                @blur="handleInputConfirm(v)"
                        >
                        </el-input>
                        <el-button v-else size="small" @click="showInput">添加</el-button>
                        <div class="text-muted small" v-if="v.tips">
                            <el-popover
                                    placement="top-start"
                                    width="300"
                                    trigger="click"
                                    :content="v.ctype+'.'+v.key">
                                <div slot="reference" v-html="warningIcon+v.tips"></div>
                            </el-popover>
                        </div>
                    </div>
                </div>
            </el-form-item>
        </div>
        <el-form-item class="setting-item">
            <div class="setting-item-body px-3">
                <el-button type="primary" :loading="loading" @click="submitConfig">保存</el-button>
            </div>
        </el-form-item>
    </el-form>
</div>
<div class="bg-white px-3 pb-3" >
    <!-- <div class="p-3 mt-3 bg">
        <div class="p-2 border-bottom">XML文件</div>
        <div class="row pl-4">
            <div class="col-6 col-lg-6 text-secondary p-2"><span>文件链接</span></div>
            <div class="col-4 col-lg-4 text-secondary p-2"><span>修改时间</span></div>
            <div class="col-4 col-lg-2 text-secondary p-2">
                <el-button type="primary" @click="generateBaiduBaipinXml()" size="mini">生成XML</el-button>
            </div>
        </div>
    </div> -->
</div>
{/block}
{block name="script"}
{js href="__PLUGIN_SRC__/Clipboard/clipboard.min.js"}
<script>
    var list = {:json_encode($Data, JSON_UNESCAPED_UNICODE) }, url = '{$url}';
    console.log(list);
    var formItemShow = [];
    for (var x in list) {
        for (var i in list[x]) {
            formItemShow.push(list[x][i].ctype + '.' + list[x][i].key);
        }
    }
</script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            view: XYBase.view,
            activeName: '{$ctype}',
            labelPosition: 'right',
            warningIcon: '<i class="el-icon-warning-outline mr-1 text-primary"></i>',
            loading: false,
            inputVisible: false,
            inputValue: '',
            WaitingSubmit: [],
            formItemShow: [],
            list: list,
            url: url
        },
        watch: {
            view: XYBase.viewWatch,
            activeName(val, oldVal) {
                this.setFormItemShow(val, oldVal);
            }
        },
        created() {
            XYBase.created(this);
            this.setFormItemShow(this.activeName);
        },
        methods: {
            generateToken() {
                $.ajax({
                    url: '?generateToken=true',
                    success(res) {
                        XYBase.success('已成功重置Token')
                        setTimeout(() => {
                            window.location.reload()
                        }, 200)
                    }
                })
            },
            copyUrl(e) {
                var innerText=this.url;
                var clip = new ClipboardJS('#copyUrl', {
                    text: function() {
                        return innerText;
                    }
                });
                clip.on('success', function(e) {
                    e.clearSelection();
                    XYBase.success('已复制');
                    clip.destroy();
                });
                clip.on('error', function(e) {
                    console.log(e);
                    clip.destroy();
                    XYBase.error('未能成功复制，请手动复制！')
                });
            },
            setFormItemShow(val, oldVal) {
                switch (val) {
                    case 'xy_data_screen':
                        this.formItemShow = ["xy_data_screen.screen_title"];
                        break;
                    case 'base_num':
                        this.formItemShow = ["xy_data_screen.web_site_count_jobResumes","xy_data_screen.web_site_count_jobViews"];
                        break;
                }
            },
            delSetting(index, row) {
                var _this = this;
                this.$confirm('是否确定删除【' + row.title + '】配置？', '提示', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    dangerouslyUseHTMLString: true,
                    type: 'warning'
                }).then(() => {
                    const loading = XYBase.openloading();
                    $.getJSON('/setting/del/' + row.id, function (ret) {
                        loading.close();
                        if (ret) {
                            if (ret.code === 0) {
                                _this.list.splice(index, 1);
                            } else XYBase.msg(ret.msg);
                        } else XYBase.error(XYBase.config.system_network_error);
                    });
                }).catch(() => {
                    XYBase.msg('已取消');
                });
            },
            handleClose(val, tag) {
                val.value.splice(val.value.indexOf(tag), 1);
                this.editConfig(val);
            },
            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput[0].$refs.input.focus();
                });
            },
            handleInputConfirm(val) {
                let inputValue = this.inputValue;
                if (inputValue) {
                    val.value.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
                this.editConfig(val);
            },
            getInputCol(val) {
                return 'w-480px';
                var cla = '';
                if (!val) return 'col-sm-2';
                switch (true) {
                    case val.length > 200:
                        cla = 'col-sm-12';
                        break;
                    case val.length > 180:
                        cla = 'col-sm-11';
                        break;
                    case val.length > 160:
                        cla = 'col-sm-10';
                        break;
                    case val.length > 140:
                        cla = 'col-sm-9';
                        break;
                    case val.length > 120:
                        cla = 'col-sm-8';
                        break;
                    case val.length > 100:
                        cla = 'col-sm-7';
                        break;
                    case val.length > 80:
                        cla = 'col-sm-6';
                        break;
                    case val.length > 60:
                        cla = 'col-sm-5';
                        break;
                    case val.length > 40:
                        cla = 'col-sm-4';
                        break;
                    case val.length > 20:
                        cla = 'col-sm-3';
                        break;
                    default:
                        cla = 'col-sm-2';
                        break;
                }
                return cla;
            },
            handleAvatarSuccess: function (res, file) {
                if (res) {
                    if (res.code === 0) {
                        if (res.data.type == 'web/img') {
                            if (this.list[res.data.ctype] && this.list[res.data.ctype][res.data.index] && this.list[res.data.ctype][res.data.index].id == res.data.id) {
                                this.list[res.data.ctype][res.data.index].value = res.data.path;
                                this.list[res.data.ctype][res.data.index].url = res.data.url;
                                this.editConfig(this.list[res.data.ctype][res.data.index]);
                            }
                        } else if (res.data.type == 'publics/files') {
                            if (this.list[res.data.ctype] && this.list[res.data.ctype][res.data.index] && this.list[res.data.ctype][res.data.index].id == res.data.id) {
                                this.list[res.data.ctype][res.data.index].value = res.data.path;
                                this.editConfig(this.list[res.data.ctype][res.data.index]);
                            }
                        }
                        XYBase.success(res.msg);
                    } else { XYBase.error(res.msg); }
                } else { XYBase.error(XYBase.config.system_network_error) }
            },
            handleAvatarError: function (res, file) {
                XYBase.error(XYBase.config.system_network_error)
            },
            beforeAvatarUpload: function (file) {
                const isJPGPNG = XYBase.config.imageMime.indexOf(file.type) >= 0;
                const isLt10M = file.size / 1024 <= 10240;

                if (!isJPGPNG) {
                    XYBase.error('缩略图只能是PNG格式');
                    return false;
                }
                if (!isLt10M) {
                    XYBase.error('缩略图大小不能超过 10M!');
                    return false;
                }
                return isJPGPNG && isLt10M;
            },
            editConfig(val) {
                var isBreak = true;
                for (var i = 0; i < this.WaitingSubmit.length; i++) {
                    if (this.WaitingSubmit[i].ctype == val.ctype && this.WaitingSubmit[i].key == val.key) {
                        this.WaitingSubmit[i] = val;
                        isBreak = false;
                        break;
                    }
                }
                if (isBreak)
                    this.WaitingSubmit.push(val);
            },
            preview() {
                window.open(this.url)
            },
            submitConfig() {
                if (this.WaitingSubmit.length) {
                    this.submitConfigAjax();
                } else {
                    return XYBase.success('保存成功');
                }
            },
            submitConfigAjax() {
                var _this = this;
                var val = this.WaitingSubmit[0];
                if (!val) return XYBase.success('保存成功');
                _this.loading = true;
                $.ajax({
                    url: '/setting/edit',
                    data: val,
                    type: 'post',
                    dataType: 'json',
                    success: function (ret) {
                        _this.loading = false;
                        if (ret) {
                            if (ret.code == 0) {
                                _this.WaitingSubmit.splice(0, 1);
                            }
                            _this.submitConfigAjax();
                        } else {
                            XYBase.error(XYBase.config.system_network_error);
                        }
                    },
                    error: function (err) {
                        _this.loading = false;
                        XYBase.error(XYBase.config.system_network_error);
                    }
                });
            },
            saveArticle: function (formName) {
                var D = this.article;
                for (var x in D) {
                    switch (x) {
                        case 'user_agreement':
                            if (!D[x]) break;
                            D[x].content = ueUA.getContent();
                            this.sendSaveArticle(D[x]);
                            break;
                        case 'privacy':
                            if (!D[x]) break;
                            D[x].content = ueP.getContent();
                            this.sendSaveArticle(D[x]);
                            break;
                    }
                }
                setTimeout('window.location.reload()', 1500);
            },
            sendSaveArticle(data) {
                var _this = this;
                console.log(data);
                const loading = XYBase.openloading();
                $.ajax({
                    url: '/editArticle/' + data.id,
                    data: data,
                    type: 'post',
                    dataType: 'json',
                    success(ret) {
                        loading.close();
                        if (ret) {
                            if (ret.code == 0) {
                                XYBase.success(ret.msg);
                            } else {
                                XYBase.msg(ret.msg);
                            }
                        } else {
                            XYBase.error(XYBase.config.system_network_error)
                        }
                    },
                    error(err) {
                        loading.close();
                        XYBase.error(XYBase.config.system_network_error)
                    }
                });
            },
            generateBaiduBaipinXml() {
                const loading = XYBase.openloading();
                $.ajax({
                    url: "/generateBaiduBaipinXml",
                    type: "POST",
                    success(res) {
                        loading.close();
                        if (res) {
                            if (res.code == 0) {
                                XYBase.success(res.msg);
                                setTimeout(() => {
                                    location.reload();
                                }, 1000);
                            } else {
                                XYBase.msg(res.msg);
                            }
                        } else {
                            XYBase.error(XYBase.config.system_network_error)
                        }
                    },
                    error(err) {
                        loading.close();
                        XYBase.error(XYBase.config.system_network_error)
                    }
                })
            }
        }
    });
    $(function () {
        reloadWindowSize();
        $(window).resize(function () {
            reloadWindowSize();
        });
    });
    function reloadWindowSize(argument) {
        var winW = $(window).width();
        if (winW <= 576) {
            vm.labelPosition = 'top';
        } else {
            vm.labelPosition = 'right';
        }
    }
    window.onbeforeunload = function (e) {
        if (vm.WaitingSubmit.length) {
            vm.$confirm('有配置还未保存，确定离开当前页面吗？', '提示', {
                confirmButtonText: '保存',
                cancelButtonText: '不保存',
                type: 'warning'
            }).then(() => {
                vm.submitConfig();
            }).catch(action => {
                if (action == 'cancel') {
                    vm.WaitingSubmit.length = [];
                    XYBase.msg('已放弃保存');
                } else {
                    XYBase.msg('已取消');
                }
            });
            var e = window.event || e;
            e.returnValue = ("确定离开当前页面吗？");
        }
    }
</script>
{/block}